<template>
  <div :class="['btns', { isPosition: type == 0 }]">
    <span v-show=" item.count> 0" @click="increment(item,item.count)" class="jian">-</span>
    <b v-show="item.count > 0">{{ item.count }}</b>
    <span @click="add(item)">+</span>
  </div>
</template>

<script>
export default {
  props: ["item", "type","index"],
  methods: {
    add(item) {
      // food.count++;
      if (!item.count) {
        item.count = 1;
      } else {
        item.count++;
      }
      this.$store.commit("setCarList", {
        item: item,
        count:item.count
      });
    },
    increment(item,index) {
      
      item.count--;
      this.$store.commit("setCarList1", {  
        item: item,
      });
    },
  },
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
div{
  display: flex;
  justify-content: space-around;
  width: 80px;
}
span{
  display: block;
font-size: 30px;
line-height: 18px;
width: 22px;
height: 21px;
border-radius: 30px;
background-color: rgb(0, 160, 220);
text-align: center;
color: azure;
}
.jian{
  box-sizing: border-box;
  font-size: 30px;
  color: rgb(0, 160, 220);;
  background-color: aliceblue;
  border: 4px solid rgb(0, 160, 220);
  line-height: 9px;
}
b{
  font-size: 15px;
  color: rgb(147, 153, 157);
  line-height: 24px;
}
</style>

